<style>
.tree {
  /*margin-top: 42px;*/
  border: 1px solid #d7dde4;
  /* max-height: 600px; */
}
.prodShow {
  z-index: 10000;
}
</style>
<template>
<Row class="layout-content-body">
  <Card>
    <p slot="title">订单信息</p>
    <Form ref='info' :model="formItem" :label-width="80">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="客户" prop="CustName">
        <Input v-model="formItem.CustName" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="金额" prop="Price">
        <Input v-model.number="formItem.Price" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="优惠金额" prop="DiscountPrice">
        <Input v-model.number="formItem.DiscountPrice" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="优惠额" prop="Off">
        <Input v-model.number="formItem.Off" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" disabled :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
      <FormItem v-for="(item, index) in recive" :key="item.Seq" :label="'第'+getindex(index) +'次付款'" required>
        <Row>
          <Col span="2" style="text-align: right">付款时间：</Col>
          <Col span="4">
          <DatePicker v-model="item.Date" disabled format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
          </Col>
          <Col span="2" style="text-align: right">应付金额：</Col>
          <Col span="4">
          <Input v-model="item.Money" disabled placeholder="请输入"></Input>
          </Col>
          <Col span="2">
          <div>{{item.Percent}}%</div>
          </Col>
          <Col span="2" style="text-align: right">说明：</Col>
          <Col span="8">
          <Input v-model="item.Remark" disabled placeholder="请输入"></Input>
          </Col>
        </Row>
      </FormItem>
    </Form>
  </Card>
  <Card>
    <p slot="title">订单明细信息</p>
    <Table :columns="columns" :data="dataAll" :hover-show="true"></Table>
  </Card>
  <Card>
    <p slot="title">已审批信息</p>
    <Table :columns="approvecolumns" :data="approves"></Table>
    <br>
    <Steps :current="current" :status="status">
      <Step v-for="item in approves" :title="item.Text" 
      :content="item.Approver + getResult(item.Result,item.Status)+'，审核时间：'+foramt(item.Atime) " 
      :key="item.Text"></Step>
    </Steps>
  </Card>
  <Card v-if="orderData.edit">
    <p slot="title">审批意见</p>
    <Form ref="editForm" :model="approveItem" :label-width="80" :rules="ruleValidate">
      <FormItem label="是否同意" prop="Result">
        <RadioGroup v-model.number="approveItem.Result" required>
          <Radio label="1">同意</Radio>
          <Radio label="2">不同意</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="审批意见" prop="Opinions" required>
        <Input v-model="approveItem.Opinions" placeholder="审批意见..."></Input>
      </FormItem>
      <FormItem label="备注" prop="Remark">
        <Input v-model="approveItem.Remark" required type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('editForm')">提交</Button>
        <Button type="ghost" style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </Card>
</Row>
</template>

<script>
import {
  getData
} from "@/common/utils";
import {
  timeFormat
} from '@/common/filter'
import dtable from "@/components/table/etable.vue"; //

import prod from "@/views/busy/prod";
var list = [];
var item = {};
export default {
  data() {
    return {
      loading: false, //数据刷新遮罩层
      approves: [],
      recive: [],
      current: 0,
      status: 'wait',
      approvecolumns: [
        //多选框
        {
          title: "名称",
          key: "Text",
          sortable: true
        },
        {
          title: "审批人",
          key: "Approver",
          sortable: true
        },
        {
          title: "审批意见",
          key: "Opinions",
          sortable: true
        },
        {
          title: "审批状态",
          key: "Result",
          sortable: true,
          render: (h, params) => {
            let str = ''
            if (params.row.Result === 1) {
              str = "同意"
            } else if (params.row.Result === 2) {
              str = "不同意"
            } else {
              if(params.row.Status===1){
                str = "正在处理"
              } else if (params.row.Status===2){
                 str = "已通过"
              }else{
                str = "未开始"
              }              
            }
            return h('span', {}, str)
          }
        },
        {
          title: '审批时间',
          key: 'Atime',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('strong', timeFormat(getData(params.row.Atime)))
            ]);
          }
        },
      ], //表格样式
      columns: [
        //多选框
        {
          title: "名称",
          key: "Name",
          sortable: true
        },
        {
          title: "型号",
          key: "Model",
          sortable: true
        },
        {
          title: "规格参数",
          key: "Spec",
          sortable: true
        },
        {
          title: "价格",
          key: "Price",
          sortable: true
        },
        {
          title: "优惠价格",
          key: "DiscountPrice",
          sortable: true,
          editable: true
        },
        {
          title: "数量",
          key: "Count",
          sortable: true,
          editable: true
        },
        {
          title: "金额",
          key: "Money",
          sortable: true
        },
        {
          title: "说明",
          key: "Remark",
          sortable: true
        }
      ], //表格样式
      summary: {
        Name: "合计",
        Money: 0
      },
      dataAll: [], //表格数据来源含合计
      datas: [], //表格数据来源
      formItem: {
        Id: "",
        Name: "",
        CustName: "",
        Remark: "",
        Price: 0,
        DiscountPrice: 0,
        Off: 0
      }, //数据编辑表单
      approveItem: {
        Opinions: "",
        Result: 1,
        Remark: "",
      }, //数据编辑表单
      ruleValidate: {
        Opinions: [{
          required: true,
          message: '意见不能为空',
          trigger: 'blur'
        }],
      Result: [
          {type: 'number', required: true, message: '必须选择审批状态', trigger: 'change' }
        ],
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      salesAd: false,
      custShow: false,
      prodShow: false,
      salesShow: false,
      total: 0,
      orderData: this.$route.params.orderData
    };
  },
  components: {
    dtable,
  },
  computed: {},
  props: {},
  watch: {},
  methods: {
    getResult(r,s) {
      if (r === 1) {
        return "同意"
      } else if (r === 2) {
        return "不同意"
      } else {
         if(s===1){
            return "正在处理"
          }else{
            return "未开始"
          }       
      }
    },
    getindex(data) {
      return data + 1
    },
    foramt(t) {
      return timeFormat(getData(t))
    },
    getSummaryMoney() {
      let sum = 0;
      if (this.datas) {
        for (let m in this.datas) {
          sum = sum + this.datas[m].Money;
        }
      }
      return sum;
    },
    getall() {
      if (!this.orderData || !this.orderData.order) {
        this.$router.push({
          name: '采购订单',
          params: {
            tab: '2'
          }
        })
        return
      }
      this.loading = true;
      this.formItem = this.orderData.order;
      console.log("formItem",this.formItem)
      this.$api.getBuyItems(this.orderData.order.Id).then(res => {
        console.debug(res)
        if (!res.error) {
          this.dataAll = res.Data.sales
          this.recive = getData(res.Data.receiv)
          this.ReceivePercent()
          this.loading = false
        } else {
          this.$Message.error(res.message);
        }
      })
      this.$api.GetStateinsByBusy(this.orderData.order.Id).then(res => {
        if (!res.error) {
          console.debug(res)
          this.approves = res.Data.states
          this.current = res.Data.current
          // this.currentState=res.Data.currentState
          this.approveItem = res.Data.currentState
          console.log(this.approves)
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    ReceivePercent() {
      let len = this.recive.length,pos = 0
      let sum = this.formItem.DiscountPrice
      while (pos < len) {
        this.recive[pos].Percent = this.recive[pos].Money / sum * 100
        pos += 1; //并从下个位置开始搜索
      }
      return
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.approveItem)
          this.$api.FlowApprove(this.approveItem).then(res => {
            if (!res.error) {
              this.$Message.success(res.message)
              this.$router.push({
                name: '采购订单',
                params: {
                  tab: '3'
                }                
              })
            } else {
              this.$Message.error(res.message, 4)
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset(name) {},

  },
  mounted() {
    this.getall();
  }
};
</script>
